<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{width:40px;}
    </style>
</head>
<body>
    <h2>这是购物车</h2>
    <a href="./list.html">继续购物</a>
    <table border="1" cellspacing="0" width="800">
        <thead>
            <tr>
                <th>选中</th>
                <th>图片</th>
                <th>名称</th>
                <th>数量</th>
                <th>价格</th>
                <th>小计</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <td align="right"><input type="checkbox"></td>
                <td>全选</td>
                <td align="right">总数量</td>
                <td>0</td>
                <td align="right">总价</td>
                <td>0</td>
                <td>删除选中</td>
            </tr>
        </tfoot>
    </table>
</body>
<script src="./js/ajax.js"></script>
<script>

    const tbody = document.querySelector("tbody");

    let goods = localStorage.getItem("goods");
    goods = goods ? JSON.parse(goods) : [];

    const pArr = [];

    // 遍历本地存储中获取到的数据
    // 根据id开启ajax请求
    // 并保存ajax请求开启之后的promise实例
    goods.forEach(val=>{
        pArr.push(ajaxPromise("http://localhost:3000/getDetail?id=" + val.id));
    })

    // 利用Promise的批处理，处理所有请求
    Promise.all(pArr).then(res=>{
        // 因为后端给的数据是json字符，所以解析promise获取到的数据
        const arr = res.map(val=>{
            return JSON.parse(val).data;
        })
        // 最终处理之后的数据
        // console.log(arr);
        // 根据数据，渲染页面
        let str = "";
        arr.forEach((val,idx)=>{
            str += `<tr>
                        <td><input type="checkbox"></td>
                        <td><img src="${val.src}"></td>
                        <td>${val.name}</td>
                        <td><input type="number" value="${goods[idx].num}"></td>
                        <td>${val.price}</td>
                        <td>${val.price * goods[idx].num}</td>
                        <td>删除</td>
                    </tr>`
        })
        tbody.innerHTML = str
    })

    console.log(goods);
</script>
</html>